<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

import qian from "comps/bagua/qian.vue";
import dui from "comps/bagua/dui.vue";
import myli from "comps/bagua/myli.vue";
import zhen from "comps/bagua/zhen.vue";
import xun from "comps/bagua/xun.vue";
import kan from "comps/bagua/kan.vue";
import gen from "comps/bagua/gen.vue";
import kun from "comps/bagua/kun.vue";

const counter = useCounterStore()

const { count } = storeToRefs(counter)

// 乾天1、兑泽2、离火3、震雷4、巽风5、坎水6、艮山7、坤地8
const list1 = [
    { 1: 1 }, //1
    { 8: 8 }, //2
    { 6: 4 }, //3
    { 7: 6 }, //4
    { 6: 1 }, //5
    { 1: 6 }, //6
    { 8: 6 }, //7
    { 6: 8 }, //8
    { 5: 1 }, //9
    { 1: 2 }, //10
    { 8: 1 }, //11
    { 1: 8 }, //12
    { 1: 3 }, //13
    { 3: 1 }, //14
    { 8: 7 }, //15
    { 4: 8 }, //16
    { 2: 4 }, //17
    { 7: 5 }, //18
    { 8: 2 }, //19
    { 5: 8 }, //20
    { 3: 4 }, //21
    { 7: 3 }, //22
    { 7: 8 }, //23
    { 8: 4 }, //24
    { 1: 4 }, //25
    { 7: 1 }, //26
    { 7: 4 }, //27
    { 2: 5 }, //28
    { 6: 6 }, //29
    { 3: 3 }, //30
    { 2: 7 }, //31
    { 4: 5 }, //32
    { 1: 7 }, //33
    { 4: 1 }, //34
    { 3: 8 }, //35
    { 8: 3 }, //36
    { 5: 3 }, //37
    { 3: 2 }, //38
    { 6: 7 }, //39
    { 4: 6 }, //40
    { 7: 2 }, //41
    { 5: 4 }, //42
    { 2: 1 }, //43
    { 1: 5 }, //44
    { 2: 8 }, //45
    { 8: 5 }, //46
    { 2: 6 }, //47
    { 6: 5 }, //48
    { 2: 3 }, //49
    { 3: 5 }, //50
    { 4: 4 }, //51
    { 7: 7 }, //52
    { 5: 7 }, //53
    { 4: 2 }, //54
    { 4: 3 }, //55
    { 3: 7 }, //56
    { 5: 5 }, //57
    { 2: 2 }, //58
    { 5: 6 }, //59
    { 6: 2 }, //60
    { 5: 2 }, //61
    { 4: 7 }, //62
    { 6: 3 }, //63
    { 3: 6 }, //64
];
</script> 
<template>
    <div>
        <ul v-for="(value, key, index) in list1[count]" :key="index">
            <li v-if="key == 1">
                <qian></qian>
            </li>
            <li v-else-if="key == 2">
                <dui></dui>
            </li>
            <li v-else-if="key == 3">
                <myli></myli>
            </li>
            <li v-else-if="key == 4">
                <zhen></zhen>
            </li>
            <li v-else-if="key == 5">
                <xun></xun>
            </li>
            <li v-else-if="key == 6">
                <kan></kan>
            </li>
            <li v-else-if="key == 7">
                <gen></gen>
            </li>
            <li v-else-if="key == 8">
                <kun></kun>
            </li>

            <li v-if="value == 1">
                <qian></qian>
            </li>
            <li v-else-if="value == 2">
                <dui></dui>
            </li>
            <li v-else-if="value == 3">
                <myli></myli>
            </li>
            <li v-else-if="value == 4">
                <zhen></zhen>
            </li>
            <li v-else-if="value == 5">
                <xun></xun>
            </li>
            <li v-else-if="value == 6">
                <kan></kan>
            </li>
            <li v-else-if="value == 7">
                <gen></gen>
            </li>
            <li v-else-if="value == 8">
                <kun></kun>
            </li>
        </ul>
    </div>
</template>


<style scoped></style>